<template>
    <view class="AddressCard" @click.stop="handleClick">
        <view class="name-tel">
           <text class="name">{{$ftext(obj?.contact_name_1)}}</text>
           <text class="ml40">{{$ftext(tel)}}</text>
           <text class="isDepot" v-if="obj.depot_code">仓库</text>
        </view>
        <view class="address">{{$ftext(obj.province + obj.city +obj.district +obj.complete_address )}}</view>
        <view class="btn">
            <slot></slot>
        </view>
    </view>
</template>
<script lang="ts">
export default {
    inheritAttrs: false
}
</script>

<script setup lang="ts">
/**
 * @author:  wyr
 * @description 【H5组件】常用地址卡片组件
 * @param { object} obj - 对象
 */

import { ref, watch,onMounted } from 'vue';
const props = defineProps({
    obj:{ type:Object, default:()=>{}}, 
})


let tel = ref('');

onMounted(()=>{
    const telTmp = props.obj.contact_mobile_1;
    tel.value = telTmp.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
})

const emit = defineEmits(['on-detail'])

const handleClick =()=>{
    emit('on-detail',props.obj);
}


</script>

<style lang="scss" scoped>
.AddressCard{
    background: #fff;
    border-radius: 20rpx;
    padding: 24rpx;
    .name-tel{
        height: 28rpx;
        font-size: $uni-font-size-lg;
        color: $uni-color-title;
        line-height: 14px;
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        .name{
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
        }
        .ml40{
            margin-left: 40rpx;
        }
        .isDepot{
            display: inline-block;
            margin-left: 10rpx;
            width: 60rpx;
            height: 36rpx;
            line-height: 36rpx;
            background: #D3D3F4;
            border-radius: 4rpx;
            color: $uni-color-primary;
            text-align: center;
            font-size: $uni-font-size-sm;
        }
    }
    .address{
        line-height: 40rpx;
        margin: 24rpx 0 28rpx;
        font-size: $uni-font-size-base;
        border-bottom: 2rpx dashed #e4e4e4;
        padding-bottom: 24rpx;
        color: #1A1C27;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
    }
    .btn{
        overflow: hidden;
    }
}
</style>